
<template lang="jade">

  div.return-bar
    i.iconfont(@click="back()") &#xe668;
    融资记录


  div.user-center.detail_top(v-infinite-scroll="down()" , infinite-scroll-disabled="busy", infinite-scroll-distance="10")
    div.searchinput.cbox.nopos
      div(v-bind:class=" !showFilter ? 'clx filter_txt':'clx filter_txt on' ", ,v-on:click="showFilterFun()") 筛选
        i.iconfont.a_decent &#xe649;
      div.clx.input
        input(v-model="keywords", type="text",placeholder="输入项目名称或关健字")
        i.iconfont.zoom &#xe62b;
      div.clx
        button(@click="searchbyKW()") 搜索

    ul.order_filter.cbox(v-show=" showFilter ")
      li(v-bind:class="{ 'on': filter_type == '1' || filter_type == '11' }",v-on:click="setFilter('1')")
        {{filter_status_txt}}
        i
      li(v-bind:class="{ 'on': filter_type == '2'  || filter_type == '21' }",v-on:click="setFilter('2')")
        {{filter_duration_txt}}
        i
      li(v-bind:class="{ 'on': filter_type == '3'  || filter_type == '31' }",v-on:click="setFilter('3')")
        {{filter_date_txt}}
        i

    ul.order_filter_status(v-show="  filter_type=='1'  ")

      li(v-bind:class="{ 'on': filter_status == '1'}",v-on:click="setFilterStatus('1', '招标中')")
        招标中
        i.iconfont &#xe64b;
      li(v-bind:class="{ 'on': filter_status == '2'}",v-on:click="setFilterStatus('2', '还款中')")
        还款中
        i.iconfont &#xe64b;

      li(v-bind:class="{ 'on': filter_status == '4'}",v-on:click="setFilterStatus('4', '逾期未还')")
        逾期未还
        i.iconfont &#xe64b;
      li(v-bind:class="{ 'on': filter_status == '5'}",v-on:click="setFilterStatus('5', '已结清')")
        已结清
        i.iconfont &#xe64b;
      li(v-bind:class="{ 'on': filter_status == '6'}",v-on:click="setFilterStatus('6', '未结清')")
        未结清
        i.iconfont &#xe64b;

    ul.order_filter_status(v-show="  filter_type=='2'  ")
      li(v-bind:class="{ 'on': filter_duration == '4'}",v-on:click="setFilterDuration('4', '一周内')")
        一周内
        i.iconfont &#xe64b;
      li(v-bind:class="{ 'on': filter_duration == '3'}",v-on:click="setFilterDuration('3', '一个月内')")
        一个月内
        i.iconfont &#xe64b;
      li(v-bind:class="{ 'on': filter_duration == '2'}",v-on:click="setFilterDuration('2', '三个月内')")
        三个月内
        i.iconfont &#xe64b;
      li(v-bind:class="{ 'on': filter_duration == '1'}",v-on:click="setFilterDuration('1', '一年内')")
        一年内
        i.iconfont &#xe64b;

    ul.order_filter_status(v-show="  filter_type=='3'  ")
      li.center
        div.input
          calendar(:value.sync="star_time", :weeks-list="weeksList")
        div.input
          calendar(:value.sync="end_time", :weeks-list="weeksList")
        button(@click="searchbyTime()") 确认




    div
      dl.invest_list(v-for="(index, item) in items")
        dd
          div.title
            span.txt
              span.blue [{{item.status_str}}]
              {{item.name}}
            span.date {{getTimeName(item.status)}}{{item.time}}

          //招标中
          ul.moneylist.triple.clearfix(v-if=" item.status == 1 || item.status == 2 ")
            li
              strong 招标金额{{item.status}}
              span {{item.account}}
            li
              strong 利率
              span {{item.borrow_apr}}
            li
              strong 招标期数
              span {{item.borrow_period}}
            li
              div.circle
                circle(:percent="item.borrow_account_scale", :stroke-width=5, :trail-width=5, :stroke-color="#99b4ff")
                  span {{item.borrow_account_scale}}
            li
              strong 剩余金额
              span {{item.borrow_account_wait}}
            li
              input.m_btn(v-link="{ name: 'userloanPay', params: { loanID: item.borrow_nid } }", type="button", value="查看详情")


          //还款中
          ul.moneylist.triple.clearfix(v-if=" item.status == 4 || item.status == 5 ")
            li
              strong 借款总额{{item.status}}
              span {{item.account}}
            li
              strong 利率
              span {{item.borrow_apr}}%
            li
              strong 期数/已还
              span {{item.borrow_period}}/{{item.periodyes}}
            li
              strong 应还本息
              span {{item.repayyes}}
            li
              strong 应还日期
              span {{item.repay_next_time}}
            li
              input.m_btn( v-link="{ name: 'userloanPay', params: { loanID: item.borrow_nid } }", type="button", value="还款")


          //已结清
          ul.moneylist.triple.clearfix(v-if=" item.status == 3 ")
            li
              strong 借款总额{{item.status}}
              span {{item.account}}
            li
              strong 利率
              span {{item.borrow_apr}}%
            li
              strong 期数/已还
              span {{item.borrow_period}}/{{item.periodyes}}
            li
              strong 已还本息
              span {{item.repayyes}}
            li
              //strong 结清日期
              //span {{item.repay_next_time}}
              //progress(:percent="novicelist.borrow_account_scale", :show-cancel="false")

              flexbox
                flexbox-item(:span="6")
                  progress(:percent="item.borrow_account_scale", :show-cancel="false")
                flexbox-item(:span="4")
                  span.mtxt {{item.borrow_account_scale}}%


            li
              //input.p_btn(v-link="{ name: 'userloanPay', params: { loanID: item.borrow_nid } }", type="button", value="查看详情")
              input.p_bg_btn(v-link="{ name: 'userloanPay', params: { loanID: item.borrow_nid } }", type="button", value="还款")

</template>

<style>
@import '~vux/dist/vux.css';
</style>

<script>
import '../../assets/sass/user/index.scss'
import {c_user_loan_info_list} from '../../config/api'
import {Calendar, Progress, Flexbox, FlexboxItem} from 'vux'


export default{

  data(){
    return{
      busy: false,
      page: 1,
      items: [],
      keywords:'',
      filter_type:'',
      showFilter:false,
      filter_status:'',
      filter_duration:'',
      filter_date:'',
      filter_status_txt:'投标状态',
      filter_duration_txt:'时间段',
      filter_date_txt:'日期',
      star_time:'TODAY',
      end_time:'TODAY',
      weeksList: ['日', '一', '二', '三', '四', '五', '六 ']
    }
  },
  components:{
    Calendar,
    Progress,
    Flexbox,
    FlexboxItem
  },
  methods: {


      back(){
        window.history.back();
      },
      getTimeName(key){
        var r_val = "";
        if(key < 3)
          r_val = "开标时间：";
        else
          r_val = "满标时间：";
        return r_val;
      },
      showFilterFun(){
        this.showFilter = !this.showFilter;
      },
      setFilterStatus(key, txt){
        this.filter_status = key;
        this.items = [];
        this.fetch(1);
        this.filter_type = this.filter_type+'1';
        this.filter_status_txt = txt;
      },

      setFilterDuration(key, txt){
        this.filter_duration = key;
        this.items = [];
        this.fetch(1);
        this.filter_type = this.filter_type+'1';
        this.filter_duration_txt = txt
      },

      setFilter(key){
        this.filter_type = key;
      },
      down: function() {
        if(this.busy == true || this.items == ''){
        return false;
        }
        this.fetch(++this.page)
      },

    searchbyKW(){
      if(this.keywords=='') return false;
      this.filter_status ='';
      this.filter_status_txt ='投标状态';

      this.filter_duration = '';
      this.filter_duration_txt ='时间段';

      this.items = [];
      this.$http({url: c_user_loan_info_list+'&number=10&keywords='+this.keywords, method: 'GET'}).then(function (response) {
        this.items = response.data.data.list;
        this.busy = false;
      });
    },

    searchbyTime(){
      this.keywords = '';
      //this.filter_status_txt ='投标状态';
      this.filter_duration = '';
      this.filter_duration_txt ='时间段';
      this.items = [];
      this.$http({url: c_invest+'&number=10&star_time='+this.star_time+'&end_time='+this.end_time, method: 'GET'}).then(function (response) {
        this.items = response.data.data.list;
        this.busy = false;
      });
    },
    fetch: function (page) {
      this.$store.dispatch('setShowLoading', true), this.busy = true;
      this.keywords = '';
      //var data = {'page': page}
      this.$http({url: c_user_loan_info_list+'&number=10&type='+this.filter_status+'&time_status='+this.filter_duration+'&page='+this.page, method: 'GET'}).then(function (response) {

        this.$store.dispatch('setShowLoading', false);
        var obj = response.data;
        if(!obj.status){
          //alert(obj.msg)
          if(obj.code == '10055'){
            sessionStorage.removeItem("login");
            this.$route.router.go('/login?from='+this.$route.path.substring(1))
          }
          return;
        }

        this.items = this.items.concat(response.data.data.list);
        this.busy = false;

      });
    }
  },
  route:{
    activate( transition ){
      this.fetch(1)
      transition.next();
    }
  }
}

</script>
